<template>
  <div id="main" style="width: 600px;height:400px;"></div>

  <!--  <div class="mod-home">-->
  <!--&lt;!&ndash;    <h3>项目介绍</h3>&ndash;&gt;-->
  <!--&lt;!&ndash;    <ul>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>renren-fast-vue基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-fast" target="_blank">renren-fast</a>后台管理前端功能，提供一套更优的前端解决方案</li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>前后端分离，通过token进行数据交互，可独立部署</li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>主题定制，通过scss变量统一一站式定制</li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>动态菜单，通过菜单管理统一管理访问路由</li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>数据切换，通过mock配置对接口数据／mock模拟数据进行切换</li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>发布时，可动态配置CDN静态资源／切换新旧版本</li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>演示地址：<a href="http://demo.open.renren.io/renren-fast" target="_blank">http://demo.open.renren.io/renren-fast</a> (账号密码：admin/admin)</li>&ndash;&gt;-->
  <!--&lt;!&ndash;    </ul>&ndash;&gt;-->
  <!--&lt;!&ndash;    <h3>获取帮助</h3>&ndash;&gt;-->
  <!--&lt;!&ndash;    <ul>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>前端Git地址：<a href="https://github.com/renrenio/renren-fast-vue" target="_blank">https://github.com/renrenio/renren-fast-vue</a></li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>后台Git地址：<a href="https://gitee.com/renrenio/renren-fast" target="_blank">https://gitee.com/renrenio/renren-fast</a></li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>代码生成器：<a href="https://gitee.com/renrenio/renren-generator" target="_blank">https://gitee.com/renrenio/renren-generator</a></li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>&ndash;&gt;-->
  <!--&lt;!&ndash;    </ul>&ndash;&gt;-->
  <!--&lt;!&ndash;    <h3>官方QQ群</h3>&ndash;&gt;-->
  <!--&lt;!&ndash;    <ul>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>高级群：324780204(大牛云集，跟大牛学习新技能)</li>&ndash;&gt;-->
  <!--&lt;!&ndash;      <li>普通群：145799952(学习交流，互相解答各种疑问)</li>&ndash;&gt;-->
  <!--&lt;!&ndash;    </ul>&ndash;&gt;-->
  <!--    -->
  <!--  </div>-->
</template>

<script>
// 全局引入相关包
import echarts from 'echarts'

export default {
  data() {
    return {      // 基于准备好的dom，初始化echarts实例

    }
  },
  mounted() {
    this.initChartBar()
  },
  methods:{
    initChartBar(){
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

<style>
.mod-home {
  line-height: 1.5;
}
</style>

